<template>
  <div>
    <div class="content-header">
      <h1 style="margin:0 0 0 0">检查组管理</h1>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb" style="font-size: 5px">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>体检管理</el-breadcrumb-item>
        <el-breadcrumb-item>检查组管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <div style="padding:10px 0 5px 0 ;line-height: 34px;float: left">
        <el-input v-model="pageNation.queryString" placeholder="项目编码/项目名称/助记码" style="width: 250px;padding-right: 5px" size="small"></el-input>
        <el-button type="primary" @click="findByCondition" size="small" icon="el-icon-search">查询</el-button>
        <el-button type="primary" @click="shouAddView" size="small" icon="el-icon-plus">新增</el-button>
      </div>
      <!--数据展示区-->
      <div>
        <el-table :data="checkGroupList" border style="width: 100%" height="600px" >
          <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
          <el-table-column prop="code" label="项目编码" align="center" width="80"></el-table-column>
          <el-table-column prop="name" label="名称" align="center" width="200"></el-table-column>
          <el-table-column prop="helpCode" label="助记码" align="center" width="200"></el-table-column>
          <el-table-column prop="sex" label="适用性别" align="center" width="80">
            <template slot-scope="scope">
              <span>{{scope.row.sex == '0' ? '不限' : scope.row.sex == '1' ? '男' : '女'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="项目说明" align="center" width="200"></el-table-column>
          <el-table-column prop="attention" label="注意事项" align="center" ></el-table-column>
          <el-table-column prop="id" label="详情" align="center" width="250">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="handleShowCheckItem(scope.row.id)">详情</el-button>
              <el-button type="primary" size="small" @click="handleShowCheckGroupView(scope.row)">编辑</el-button>
              <el-button type="danger" size="small" @click="handleDeleteCheckGroup(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
              background
              @current-change="handleCurrentPage"
              @size-change="handleSizeChange"
              :current-page="pageNation.currentPage"
              :page-size="pageNation.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="[5, 10, 20, 30]"
              :total="pageNation.total">
          </el-pagination>
        </div>
      </div>
    </div>

    <!--查看检查项详情对话框-->
    <el-dialog title="查看检查项对话框" :visible.sync="dialogFormVisible4CheckItemShow">
      <el-table :data="checkItemData" border  >
        <el-table-column type="index" align="center" label="序号" ></el-table-column>
        <el-table-column prop="code" label="项目编码" align="center" ></el-table-column>
        <el-table-column prop="name" label="名称" align="center" ></el-table-column>
        <el-table-column prop="sex" label="适用性别" align="center" >
          <template slot-scope="scope">
            <span>{{scope.row.sex == '0' ? '不限' : scope.row.sex == '1' ? '男' : '女'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="适用年龄" align="center" ></el-table-column>
        <el-table-column prop="price" label="价格" align="center" ></el-table-column>
        <el-table-column prop="remark" label="项目说明" align="center" ></el-table-column>
        <el-table-column prop="attention" label="注意事项" align="center" ></el-table-column>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible4CheckItemShow = false">关闭</el-button>
        </div>
      </el-table>
    </el-dialog>
    <!--编辑检查项对话框-->
    <el-dialog title="编辑检查项对话框" :visible.sync="dialogFormVisible4CheckGroupEdit">
      <el-form ref="dataUpdateForm"   label-position="right" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目编码" prop="code">
              <el-input v-model="checkGroupData.code" style="width: 220px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="name">
              <el-input v-model="checkGroupData.name" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="name">
              <el-input v-model="checkGroupData.helpCode" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="性别">
              <el-select v-model="checkGroupData.sex">
                <el-option label="不限" value="0"></el-option>
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目说明">
              <el-input v-model="checkGroupData.remark"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注意事项">
              <el-input v-model="checkGroupData.attention"/>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="checkScrol">
          <table class="datatable">
            <thead>
            <tr>
              <th>选择</th>
              <th>项目编码</th>
              <th>项目名称</th>
              <th>项目说明</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="c in allCheckItemData">
              <td>
                <input :id="c.id" v-model="checkItemIds" type="checkbox" :value="c.id">
              </td>
              <td><label :for="c.id">{{c.code}}</label></td>
              <td><label :for="c.id">{{c.name}}</label></td>
              <td><label :for="c.id">{{c.remark}}</label></td>
            </tr>
            </tbody>
          </table>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelCheckGroupEdit">取 消</el-button>
        <el-button type="primary" @click="handleCheckGroupEdit">确 定</el-button>
      </div>
    </el-dialog>

    <!--新增检查项对话框-->
    <el-dialog title="新增检查项对话框" :visible.sync="dialogFormVisible4CheckGroupAdd">
      <el-form ref="dataUpdateForm"   label-position="right" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目编码" prop="code">
              <el-input v-model="checkGroupDataAdd.code" style="width: 220px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="name">
              <el-input v-model="checkGroupDataAdd.name" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="助记码" prop="name">
              <el-input v-model="checkGroupDataAdd.helpCode" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="适用性别">
              <el-select v-model="checkGroupDataAdd.sex">
                <el-option label="不限" value="0"></el-option>
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目说明">
              <el-input v-model="checkGroupDataAdd.remark"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注意事项">
              <el-input v-model="checkGroupDataAdd.attention"/>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="checkScrol">
          <table class="datatable">
            <thead>
            <tr>
              <th>选择</th>
              <th>项目编码</th>
              <th>项目名称</th>
              <th>项目说明</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="c in allCheckItemData">
              <td>
                <input :id="c.id" v-model="checkItemIds" type="checkbox" :value="c.id">
              </td>
              <td><label :for="c.id">{{c.code}}</label></td>
              <td><label :for="c.id">{{c.name}}</label></td>
              <td><label :for="c.id">{{c.remark}}</label></td>
            </tr>
            </tbody>
          </table>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelCheckGroupAdd">取 消</el-button>
        <el-button type="primary" @click="handleCheckGroupAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getRequest} from "../../utils/api";
import {postRequest} from "../../utils/api";
import {putRequest} from "../../utils/api";
import {deleteRequest} from "../../utils/api";
import {postKeyValueRequest} from "../../utils/api";

export default {
  name: "checkGroup",
  data(){
    return{
      pageNation:{
        currentPage: 1,
        pageSize:5,
        queryString: '',
        total: 0,
      },
      checkGroupList:[],
      checkGroupData:{
        attention: '',
        code: '',
        helpCode: '',
        id: '',
        name:'',
        remark:'',
        sex:'',
      },
      checkGroupDataAdd:{
        attention: '',
        code: '',
        helpCode: '',
        name:'',
        remark:'',
        sex:'',
      },
      dialogFormVisible4CheckItemShow:false,
      dialogFormVisible4CheckGroupEdit: false,
      dialogFormVisible4CheckGroupAdd: false,
      checkItemIds:[],
      checkItemData:[],
      allCheckItemData:[],

    }
  },
  methods:{
    findCheckItemIds(id){
      getRequest("/checkGroup/itemIds/"+id).then(res=>{
        this.checkItemIds = res;
      })
    },
    findByCondition(){
      getRequest("/checkGroup/condition",this.pageNation).then(res=>{
        if(res){
          this.checkGroupList = res.data;
          this.pageNation.total = res.total;
        }
      })
    },
    findCheckItemById(id){
      getRequest("/checkGroup/"+id).then(res=>{
        if(res){
          this.checkItemData = res;
        }
      })
    },
    findAllCheckItem(){
      getRequest("/checkItem/").then(res=>{
        if(res){
          this.allCheckItemData = res;
        }
      })
    },
    handleDeleteCheckGroup(id){
      deleteRequest("/checkGroup/"+id).then(res=>{
        if(res){
          this.findByCondition();
        }
      })
    },
    handleShowCheckItem(id){
      this.findCheckItemById(id);
      this.dialogFormVisible4CheckItemShow = true;
    },
    handleShowCheckGroupView(item){
      this.findAllCheckItem();
      this.findCheckItemIds(item.id);
      this.checkGroupData = item;
      // console.log(this.checkItemData);
      this.dialogFormVisible4CheckGroupEdit = true;

    },
    cancelCheckGroupAdd(){
      this.dialogFormVisible4CheckGroupAdd = false;
      this.checkGroupData = {};
      this.checkItemIds = [];
    },
    handleCheckGroupAdd(){
      console.log("ids="+this.checkItemIds);
      console.log(this.checkGroupDataAdd);
      let g = this.checkGroupDataAdd;
      let items = this.checkItemIds;
      let url = "/checkGroup/?";
      for (let i = 0; i < items.length; i++) {
        if(i == items.length-1){
          url += "items="+items[i];
          break;
        }
        url += "items="+items[i]+"&";
      }
      url = url +'&code='+g.code+'&name='+g.name+'&sex='+g.sex+ '&remark='+g.remark+'&attention='+g.attention;
      console.log(url);
      postRequest(url).then(res=>{
        if(res){
          this.dialogFormVisible4CheckGroupEdit = false;
          this.checkItemData = [];
          this.findByCondition();
        }
      })
    },
    cancelCheckGroupEdit(){
      this.dialogFormVisible4CheckGroupEdit = false;
      this.checkItemIds = [];
    },
    handleCheckGroupEdit(){
      console.log("ids="+this.checkItemIds);
      console.log(this.checkGroupData);
      let g = this.checkGroupData;
      let items = this.checkItemIds;
      let url = "/checkGroup/?";
      for (let i = 0; i < items.length; i++) {
        if(i == items.length-1){
          url += "items="+items[i];
          break;
        }
        url += "items="+items[i]+"&";
      }
      url = url +'&id='+g.id+'&code='+g.code+'&name='+g.name+'&sex='+g.sex+ '&remark='+g.remark+'&attention='+g.attention;
      console.log(url);
      putRequest(url).then(res=>{
        if(res){
          this.dialogFormVisible4CheckGroupEdit = false;
          this.checkItemData = [];
          this.findByCondition();
        }
      })
    },
    shouAddView(){
      this.dialogFormVisible4CheckGroupAdd = true;
      this.findAllCheckItem();
    },
    handleSizeChange(pageSize){
      this.pageNation.pageSize = pageSize;
      this.findByCondition();
    },
    handleCurrentPage(currentPage){
      this.pageNation.currentPage = currentPage;
      this.findByCondition();
    },
  },
  created() {
    this.findByCondition();
  }
}
</script>

<style scoped>

</style>